<template>
	<view class="sv-table-header">
		<el-form inline :model="filterForm">
			<el-form-item label="名称">
				<el-input v-model="filterForm.name" placeholder="请输入名称" clearable />
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="filterForm.enable" placeholder="状态" clearable>
					<el-option
						:label="item.label"
						:value="item.value"
						v-for="item in status"
						:key="item"
					/>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submit">搜索</el-button>
				<el-button type="primary" @click="reset">重置</el-button>
			</el-form-item>
		</el-form>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const emits = defineEmits(['submit'])

// 过滤条件表单
const filterForm = ref({
	name: '',
	enable: ''
})

// 停启用状态选择器
const status = ref([
	{
		label: '启用',
		value: true
	},
	{
		label: '停用',
		value: false
	}
])

// 提交
function submit() {
	emits('submit', filterForm.value)
}

// 重置
function reset() {
	filterForm.value = {
		name: '',
		enable: ''
	}
}
</script>

<style lang="scss">
.sv-table-header {
	width: 100%;
	padding: 10px 10px 0 10px;
	border-bottom: 1px solid #{$sv-nav-border-color};
	box-sizing: border-box;

	::v-deep .el-form-item {
		margin-bottom: 20px;
	}
}
</style>
